<template>
  <!-- 创建一个外部的容器 -->
  <div class="cube">
    <!-- 引入图片 -->
    <div v-for="(item, index) in list" :key="index" :class="`box${index + 1}`">
      <img :src="item.imgUrl" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  mixins: [],
  components: {},
  props: {},
  data() {
    return {
      list: [
        {
          imgUrl: require("@/assets/mm/wallhaven-6o9v77.jpg"),
        },
        {
          imgUrl: require("@/assets/mm/wallhaven-6ojvlw.jpg"),
        },
        {
          imgUrl: require("@/assets/mm/wallhaven-73q8w9.jpg"),
        },
        {
          imgUrl: require("@/assets/mm/wallhaven-k7gv57.jpg"),
        },
        {
          imgUrl: require("@/assets/mm/wallhaven-m9ev1y.jpg"),
        },
        {
          imgUrl: require("@/assets/mm/wallhaven-md9me1.jpg"),
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang='scss'>
html {
  /* 设置当前网页的视距为800px，人眼距离网页的距离 */
  perspective: 1200px;
}
.cube {
  width: 400px;
  height: 400px;
  margin: 150px auto;
  /* transform默认情况下是2d变形  如果想要设置3d变形效果需要设置 transform-style: preserve-3d;*/
  transform-style: preserve-3d;
  animation: rotate 7s linear infinite;
}

.cube > div {
  opacity: 0.8;
  position: absolute;
}

img {
  width: 400px;
  height: 400px;
  vertical-align: middle;
}
.box1 {
  transform: rotateY(90deg) translateZ(200px);
}
.box2 {
  transform: rotateY(-90deg) translateZ(200px);
}
.box3 {
  transform: rotateX(90deg) translateZ(200px);
}
.box4 {
  transform: rotateX(-90deg) translateZ(200px);
}
.box5 {
  transform: rotateX(0deg) translateZ(-200px);
}
.box6 {
  transform: translateZ(200px) rotateY(180deg);
}

@keyframes rotate {
  from {
    transform: rotateX(0) rotateZ(0);
  }
  to {
    /* turn表示转一圈 */
    transform: rotateX(1turn) rotateZ(1turn);
  }
}
</style>

